// eslint-disable-next-line @typescript-eslint/no-unused-vars
import { h, fragment } from '@knno/dom/jsx';
import { bar } from './index.css';
import Person from '@material-design-icons/svg/filled/person.svg';
import { Dialog } from '@knno/ui/dialog';
import { Toast } from '@knno/ui/toast';
import { Select } from '@knno/ui/jsx/select';
import { List } from '@knno/ui/jsx/list';
import { Button } from '../../../dist/jsx/button';
import { Nodes } from '@knno/dom';
import { PopList } from '../../../dist/components/popList/popList';

const DATA = [
	{
		text: '数据1',
		value: 1,
		desc: '数据1描述',
		children: [
			{
				text: '数据1-1',
				value: 11,
				desc: '数据1-1描述',
			},
			{
				text: '数据1-2',
				value: 12,
				desc: '数据1-2描述',
				children: [
					{
						text: '数据1-2-1',
						desc: '数据1-2-1描述',
						value: 121,
					},
					{
						text: '数据1-2-2',
						desc: '数据1-2-2描述',
						value: 122,
					},
				],
			},
		],
	},
	{
		text: '数据2',
		value: 2,
		desc: '数据2描述',
	},
	{
		text: '数据3',
		value: 3,
		desc: '数据3描述',
		expand: true,
		children: [
			{
				text: '数据3-1',
				desc: '数据3-1描述',
				value: 31,
			},
			{
				text: '数据3-2',
				desc: '数据3-2描述',
				value: 32,
				children: [
					{
						text: '数据3-2-1',
						desc: '数据3-2-1描述',
						value: 321,
					},
					{
						text: '数据3-2-2',
						desc: '数据3-2-2描述',
						value: 322,
					},
				],
			},
		],
	},
];

export function ShowSelect() {
	const resultDiv: Nodes[] = [];
	let selected: unknown[] | undefined;
	return (
		<>
			<h2>选择框</h2>
			<div class={bar}>
				<Select
					clearable={true}
					value="选项1"
					options={['选项1', '选项2', '选项3']}
					ref={(s) => {
						s.on('change', () => {
							Toast.show(s.value() + '');
						});
					}}
				/>
				<Select
					placeholder="移动端样式"
					class="mobile"
					clearable={true}
					options={['选项1', '选项2', '选项3']}
					ref={(s) => {
						s.on('change', () => {
							Toast.show(s.value() + '');
						});
					}}
				/>
				<Select
					clearable={true}
					placeholder="选择框..."
					column={{
						children: 'children',
						expand: 'expand',
					}}
					options={DATA}
				/>
				<Select
					clearable={true}
					suffixIcon={Person}
					placeholder="自定义选择框，选人..."
					onPopup={() => {
						return new Promise((resolve) => {
							const dlg = Dialog.create(
								<List
									activable={true}
									column={{
										value: 'value',
										text: 'text',
										expand: 'expand',
										children: 'children',
									}}
									rows={DATA}
									ref={(l) => {
										l.on('rowclick', () => {
											const result = {
												value: l.activeValue(),
												text: l.activeText() + '',
											};
											dlg.close();
											resolve(result);
										});
									}}
								/>
							)
								.autoClose(true)
								.show()
								.on('close', () => {
									resolve(null);
								});
						});
					}}
				/>
				<hr />
				<Button
					onclick={function () {
						const handler = PopList.show(
							DATA,
							{ value: 'value', text: 'text', children: 'children', expand: 'expand' },
							{ resultFullPath: true, refer: this, width: 300 }
						);
						handler.onSelect((value, text, row) => {
							resultDiv[0].text(text + '');
						});
					}}
				>
					弹出选择框返回全路径
				</Button>
				<div style={{ padding: '1em' }} ref={(d) => resultDiv.push(d)}></div>
				<hr />
				<Button
					onclick={function () {
						const handler = PopList.show(
							DATA,
							{ value: 'value', text: 'text', children: 'children', expand: 'expand' },
							{ resultTextField: 'desc', width: '30em', refer: this }
						);
						handler.onSelect((value, text, row) => {
							resultDiv[1].text(text + '');
						});
					}}
				>
					弹出选择框返回指定字段
				</Button>
				<div style={{ padding: '1em' }} ref={(d) => resultDiv.push(d)}></div>
				<hr />
				<Button
					onclick={function () {
						const handler = PopList.show(
							DATA,
							{ value: 'value', text: 'text', children: 'children', expand: 'expand' },
							{
								resultFullPath: true,
								width: '30em',
								refer: this,
								multiSelect: true,
								useAction: true,
								useSearch: true,
								selected,
								noSelectField: 'children',
								multiSelectType: 'cascade-leaf',
							}
						);
						handler.onSelectMultiple((selection) => {
							selected = selection.map((s) => ({ value: s.value }));
							resultDiv[2].text(JSON.stringify(selection));
						});
					}}
				>
					弹出多选返回全路径
				</Button>
				<div style={{ padding: '1em' }} ref={(d) => resultDiv.push(d)}></div>
			</div>
		</>
	);
}
